import React from "react"
import styles from "./Select.css"

export default class Select extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            style1: styles.box,
            style2: styles.box,
            style3: styles.box,
            style4: styles.box,
        }
    }

    render() {
        return (
            <div className={styles.warp}>
                <div>
                    <div className={styles.flex}>
                        <div onClick={() => this.handleCardClick(1)} className={this.state.style1}>
                            <div>
                                <img ref="img1" width='100%' src="/img/tj/资源 821@2x.png" alt=""/>
                            </div>
                            <div>
                                <img width='100%' src="/img/tj/资源 86@2x.png" alt=""/>
                            </div>

                            {/*<div className={styles.back}></div>*/}
                        </div>
                        <div onClick={() => this.handleCardClick(2)} className={this.state.style2}>
                            <div><img ref="img2" width='100%' src="/img/tj/资源 831@2x.png" alt=""/></div>
                            <div><img width='100%' src="/img/tj/资源 87@2x.png" alt=""/></div>
                        </div>
                    </div>
                    <div className={styles.flex}>
                        <div onClick={() => this.handleCardClick(3)} className={this.state.style3}>
                            <div><img ref="img3" width='100%' src="/img/tj/资源 841@2x.png" alt=""/></div>
                            <div><img width='100%' src="/img/tj/资源 88@2x.png" alt=""/></div>
                        </div>
                        <div onClick={() => this.handleCardClick(4)} className={this.state.style4}>
                            <div><img ref="img4" width='100%' src="/img/tj/资源 851@2x.png" alt=""/></div>
                            <div><img width='100%' src="/img/tj/资源 89@2x.png" alt=""/></div>
                        </div>
                    </div>
                    <img src="/img/tj/资源 82@2x.png" style={{display: 'none'}}/>
                    <img src="/img/tj/资源 83@2x.png" style={{display: 'none'}}/>
                    <img src="/img/tj/资源 84@2x.png" style={{display: 'none'}}/>
                    <img src="/img/tj/资源 85@2x.png" style={{display: 'none'}}/>
                </div>
            </div>
        )
    }

    handleCardClick = (num) => {
        switch (num) {
            case 1:
                this.refs.img1.src = "/img/tj/资源 82@2x.png"
                this.setState({
                    style1: styles.flip
                })
                break
            case 2:
                this.refs.img2.src = "/img/tj/资源 83@2x.png"
                this.setState({
                    style2: styles.flip
                })
                break
            case 3:
                this.refs.img3.src = "/img/tj/资源 84@2x.png"
                this.setState({
                    style3: styles.flip
                })
                break
            case 4:
                this.refs.img4.src = "/img/tj/资源 85@2x.png"
                this.setState({
                    style4: styles.flip
                })
                break
        }
        setTimeout(() => {
            this.props.history.push('/story/createstory?type=' + num)
        }, 1800)
    }
}
